<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">商销客户 {{ sellerInfo?.sellerName }}</span>
          <el-tag
            v-if="sellerInfo"
            type="warning"
          >
            <credit-status
              :data="sellerInfo"
              types="detail"
            />
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="handlBack"
        >返回</el-button>
        <template v-if="sellerInfo?.creditInfo">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit'], bool: sellerInfo.creditInfo.creditStatus==='1'}"
            type="primary"
            class="main-btn"
            size="small"
            @click="creditSetting"
          >调整信用</el-button>
        </template>
        <template v-if="sellerInfo?.creditInfo===null||sellerInfo?.creditInfo&&sellerInfo?.creditInfo?.creditStatus!=='1'">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit']}"
            type="primary"
            class="main-btn"
            size="small"
            @click="creditSetting"
          >设置信用</el-button>
        </template>
      </template>
    </header-module>
    <div class="main-content">
      <item-title title="信用信息" />
      <el-form
        class="form-detailData"
        label-position="right"
        label-width="160px"
        inline
        :model="sellerInfo"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="销商客户编号：">
              <div>{{ sellerInfo?.sellerNumber || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销商客户名称：">
              <div>{{ sellerInfo?.sellerName || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业所在地区：">
              <div>{{ sellerInfo?.provinceName }} / {{ sellerInfo?.cityName }} / {{ sellerInfo?.areaName }}</div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="sellerInfo?.creditInfo"
            :span="24"
          >
            <el-form-item label="应收最大额度：">
              <div><span>{{ sellerInfo?.creditInfo?.quota > 0 ? sellerInfo?.creditInfo?.quota : '不限额' }}</span><span v-if="sellerInfo?.creditInfo?.quota > 0">元</span></div>
            </el-form-item>

          </el-col>
          <el-col
            v-else
            :span="24"
          >
            <div
              class="img-container"
              style="display:flex;flex-direction:column;justify-content:center;align-items:center"
            >
              <div class="img-container">
                <img src="@CRM/assets/img/no_setting_credit.png">
              </div>
              <span style="color: #666">未设置信用</span>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div
        v-if="sellerInfo?.creditInfo"
        class="history-list"
        style="margin-top: 20px"
      >
        <item-title title="调整记录" />
        <operation-view
          :id="sellerInfo?.creditInfo?.id"
          mode="credit"
        />
      </div>
    </div>
    <agent-credit-setting
      ref="creditSettingRef"
      :mode-id="sellerInfo?.id"
      :mode="mode"
      @on-success="updateDetail"
    />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  components: {
    creditStatus: defineAsyncComponent(() =>
      import('../modules/creditStatus.vue')
    ),
    agentCreditSetting: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/creditManagement/modules/agentCreditSetting.vue'
      )
    ),
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    const state = reactive({
      id: Number(route.query.id),
      sellerInfo: null,
      creditSettingRef: null,
    })

    // 返回
    const handlBack = () => {
      router.back()
    }

    const getDetail = () => {
      api.internalControl
        .INTERNAL_CONTROL_FINANCE_CREDIT_DETAIL({ sellerId: state.id })
        .then((res) => {
          if (res.code === 0) {
            state.sellerInfo = res.data.data
          }
        })
    }

    const creditBtn = (flowStatus) => {
      var bool = false
      if (flowStatus === 'DOING') {
        currentInstance.proxy.customMessage({
          type: 'warning',
          message: '您的信用正在审核，暂不支持调整',
        })
        bool = true
      }
      return bool
    }
    const creditSetting = () => {
      var types = 'create'
      // 判断是否可以调整信用
      if (state.sellerInfo.creditInfo === null) {
        types = 'create'
      } else {
        var bool = creditBtn(state.sellerInfo.creditInfo.flowStatus)
        if (state.sellerInfo.creditInfo.creditStatus === '-1') {
          if (!bool) {
            types = 'edit'
          } else {
            return
          }
        } else if (state.sellerInfo.creditInfo.creditStatus === '1') {
          if (!bool) {
            types = 'change'
          } else {
            return
          }
        } else {
          currentInstance.proxy.customMessage({
            type: 'warning',
            message: '你暂时不符合信用调整的条件',
          })
          return
        }
      }
      state.creditSettingRef.open({
        types: types,
        modeId: state.sellerInfo?.id,
        creditDetail: state.sellerInfo?.creditInfo,
      })
    }

    const updateDetail = () => {
      getDetail()
    }

    onMounted(() => {
      getDetail()
    })

    return {
      ...toRefs(state),
      handlBack,
      updateDetail,
      creditSetting,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
